<template>
  <view>
    <uni-nav-bar
      fixed
      :border="false"
      height="112rpx"
      leftWidth="100%"
      :backgroundColor="topNavBarShow ? '#fff' : props.backgroundColor"
      class="top-bar">
      <template #left>
        <view
          class="left-icon"
          @click="onLeft">
          <!-- {{ $t('index.test') }} -->
          <svg
            viewBox="0 0 81 20"
            width="4.6rem"
            height="1.5rem"
            fill="#17008C">
            <path
              fill-rule="evenodd"
              d="M11.533 0 3.969 8.895V0H.101v19.534h3.868V10.72l7.719 8.814h4.973L8.119 9.77 16.429 0zm14.265 5.52c-1.436 0-2.764.516-3.739 1.452l-.335.322V.007h-3.822V12.46c0 4.647 2.743 7.535 7.156 7.535s7.448-3.038 7.448-7.224c0-4.187-2.818-7.25-6.705-7.25h-.003Zm-.606 10.929c-2.007 0-3.642-1.657-3.642-3.69s1.635-3.688 3.642-3.688 3.64 1.656 3.64 3.689-1.634 3.689-3.64 3.689m50.65-10.471h4.259l-5.662 6.778 5.662 6.782h-4.259l-4.893-5.857v5.857h-3.822V0h3.822v11.835zm-16.21-.457c-2.36 0-3.817 1.118-4.51 1.9v-1.44H51.43v13.557h3.825v-7.382c0-1.846 1.267-3.133 2.855-3.133 1.587 0 2.854 1.287 2.854 3.133v7.382h3.822v-8.544c0-3.174-2.27-5.473-5.154-5.473M34.3 12.77c0-4.201 3.1-7.25 7.369-7.25 4.301 0 7.423 3.049 7.423 7.25v6.77h-3.48v-1.92l-.216.303c-.014.022-1.508 2.073-4.305 2.073-3.937 0-6.791-3.024-6.791-7.224Zm3.843-.011c0 2.033 1.635 3.689 3.641 3.689s3.641-1.657 3.641-3.69S43.79 9.07 41.784 9.07s-3.641 1.656-3.641 3.689"
              clip-rule="evenodd"></path>
          </svg>
        </view>
      </template>
      <template #right>
        <view
          class="right-icon"
          style="display: flex">
          <view
            v-if="isTokenData"
            class="top-app_download"
            @click="onGoLogin">
            {{ $t('login.title') }}
          </view>
          <uni-icons
            :type="topNavBarShow ? 'closeempty' : 'bars'"
            size="30"
            @click="topNavBarShow = !topNavBarShow"></uni-icons>
        </view>
      </template>
    </uni-nav-bar>

    <view
      v-if="topNavBarShow"
      :class="topNavBarShow ? 'light-index' : ''"
      class="top-index">
      <view :class="isTokenData ? '' : 'top-nav-list'">
        <view
          v-for="(item, index) in topNavList"
          :key="index">
          <view
            class="title"
            @click="onChoice(item)">
            <text>
              {{ $t(`nav.title${item.name}`) }}
            </text>
            <uni-icons
              v-if="['14', '5'].includes(item.name)"
              type="down"
              size="18"
              color="#666666"
              :class="item.expanded ? 'down-item' : ''"
              class="down-icon"></uni-icons>
          </view>
          <view
            v-if="item.expanded && item.children.length"
            class="expanded-content">
            <!-- <view class="title">
              <text style="color: #3462fe">
                {{ $t(`nav.title${item.name}`) }}
              </text>
            </view> -->
            <view
              v-for="(child, i) in item.children"
              :key="i"
              class="title"
              @click="onChoice(child)">
              <text>
                {{ $t(`nav.title${child.name}`) }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <view
        v-if="!isTokenData"
        class="top-out-btn">
        <view style="padding: 0 32rpx">
          <button
            class="out-btn"
            @click="logout()">
            <text>
              {{ $t('logout.title') }}
            </text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useUser, TOKEN } from '@/hooks/useUser'

  const { needLogin, logout } = useUser()

  const isTokenData = computed(() => !TOKEN.value)

  const topNavList = ref([
    {
      name: '14',
      url: '',
      expanded: false,
      children: [
        { name: '14-1', url: '/pages/bank-index/bank-index?index=1' },
        { name: '14-2', url: '/pages/bank-index/bank-index?index=2' },
        { name: '14-3', url: '/pages/bank-index/bank-index?index=3' },
        { name: '14-4', url: '/pages/bank-index/bank-index?index=4' }
      ]
    },
    // { name: '1', url: '/pages/service-index/service-index' }, // 服务介绍
    { name: '17', url: '/pages/product/product' },
    // {
    //   name: '5',
    //   url: '',
    //   expanded: false,
    //   children: [
    //     { name: '5-1', url: '' },
    //     { name: '5-2', url: '' }
    //   ]
    // },
    { name: '5-1', url: '' },
    { name: '5-2', url: '' },
    { name: '2', url: '/pages/notice/notice' },
    { name: '3', url: '/pages/problem/problem' },
    { name: '4', url: '/pages/comment/comment' },
    { name: '10', url: '/pages/protocol/protocol' },
    { name: '19', url: '/pages/user-guide/user-guide' }
    // { name: '6', url: '/pages/flow/flow' },
    // { name: '7', url: '/pages/partner/partner' },
    // { name: '8', url: '/pages/provide/provide' },
    // { name: '9', url: '' },
    // { name: '12', url: '' },
  ])

  const topNavBarShow = ref(false)

  // 接收父组件参数
  const props = defineProps({
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  })

  const onLeft = () => {
    topNavBarShow.value = false
    uni.navigateTo({
      url: '/pages/index/index'
    })
  }

  const onChoice = (e) => {
    if (['5-1', '5-2'].includes(e.name)) {
      topNavBarShow.value = false
      const isShow = e.name === '5-2'
      needLogin(isShow ? 'enterprise' : '').then((res) => {
        if (res) {
          uni.navigateTo({
            url: `/pages/apply-for/apply-for${isShow ? '?type=enterprise' : ''}`
          })
        }
      })
      return
    }
    if (e.url) {
      topNavBarShow.value = false
      uni.navigateTo({
        url: e.url
      })
      return
    }
    if (e?.children?.length) {
      e.expanded = !e.expanded
      return
    }
    uni.showToast({
      title: '기대해주세요.',
      icon: 'none'
    })
  }

  const onGoLogin = () => {
    uni.reLaunch({
      url: '/pages/login/login'
    })
  }
</script>

<style lang="scss">
  .top-index {
    position: fixed;
    height: calc(100vh - 112rpx);
    width: 100%;
    top: 112rpx;
    left: 0;
    background: #fff;
    z-index: 101;
    overflow-y: auto;

    .top-nav-list {
      height: calc(100vh - 332rpx);
      overflow-y: auto;
    }

    .top-out-btn {
      margin-top: 20rpx;
      width: 100%;
      height: 200rpx;

      button {
        height: 100rpx;
        line-height: 100rpx;
        background: #eb4848d7;
        border-radius: 64rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .title {
      padding: 8rpx 32rpx;
      height: 96rpx;
      font-family: 'Pretendard K Edition';
      font-weight: 500;
      font-size: 38rpx;
      color: #000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .expanded-content {
      background: #e2ecf8;

      .title {
        color: #666666;
      }
    }

    .down-icon {
      transition: transform 0.3s ease;
    }

    .down-item {
      transform: rotate(180deg);
    }
  }
</style>
